<template>
  <div class="text-geometry-prc">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
const helvetiker = import.meta.globEager('three/examples/fonts/helvetiker_regular.typeface.json');
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const scene =  new THREE.Scene();
scene.background = new THREE.Color(0xAAAA);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 15, 15);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
const point  = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true,
});
renderer.debug.checkShaderErrors = false;
renderer.setClearColor(new THREE.Color(), 0);
renderer.setPixelRatio(750 / window.innerWidth);
@Options({ components: {} })
export default class TextGeometryPrc extends Vue {
  public rect: DOMRect|null = null;

  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    renderer.setSize(this.rect.width, this.rect.height, false);
    (this.$refs.canvas as HTMLDivElement).append(renderer.domElement);

    const loader = new FontLoader();
    loader.load('../../../node_modules/three/examples/fonts/helvetiker_regular.typeface.json', (font) => {
      const text = 'three.js';
      const geometry = new TextGeometry(text, {
        font,
        size: 4,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.15,
        bevelSize: 0.3,
        bevelSegments: 5,
      });
      const material = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        wireframe: false,
      });
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    });

    renderer.setAnimationLoop(() => {
      renderer.render(scene, camera);
    });

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableZoom = false;
  }
}
</script>

<style lang="postcss" scoped>
  .text-geometry-prc{
    touch-action: none;
    position: absolute;
    left: 0;top: 0;
    width: 100%;height: 100%;
    background: #98bbd1;
    .canvas{
      position: absolute;
      left: 0;top: 0;
      width: 100%;height: 100%;
       :deep(canvas){
        width: 100%;height: 100%;
      }
    }
  }
</style>
